<template>
  <div class="goods">
    <div class="goods_content" v-for="(item, index) in tableData" :key="index" @click="gooodsClick(item)"
      :style="{ marginTop: index < 3 ? '0' : '24px' }">

      <img v-if="selectTab === 'lost'" :src="item?.files ? item?.files?.[0]?.resourceAddress : image.noImg"
        class="image" />
      <img v-else :src="item?.goodsFiles ? item?.goodsFiles?.[0]?.resourceAddress : image.noImg" class="image" />

      <div v-if="selectTab === 'lost'" class="message">
        <div class="message_content">
          <div class="type">{{ item['goodsName'] }}</div>
          <div class="terminal">{{ item['lostTerminal'] }}</div>
        </div>
        <div class="message_content" style="margin-top: 8px;">
          <div class="headline">物品类型：</div>
          <div class="headline_content">{{ item?.goodsType ?? '' }}</div>
        </div>
        <div class="message_content" style="margin-top: 4px;">
          <div class="headline">遗失时间：</div>
          <div class="headline_content">
            {{ item.lostTimeStart ? formatTime(item.lostTimeStart, 'YYYY-MM-DD') : '' }}
            <!-- {{ item.lostTimeEnd ? '~' + formatTime(item.lostTimeEnd, 'YYYY-MM-DD') : '' }} -->
          </div>
        </div>
        <div class="message_content" style="margin-top: 4px;">
          <div class="headline">遗失地：</div>
          <div class="headline_content">{{ item?.lostPlace ?? '' }}</div>
        </div>
        <div class="message_content" style="margin-top: 4px;">
          <div class="headline">失主姓名：</div>
          <div class="headline_content">{{ item?.lostName ?? '' }}</div>
        </div>
        <div class="message_content" style="margin-top: 4px;">
          <div class="headline">物品编号：</div>
          <div class="headline_content">{{ item?.lostId || item?.goodsCode || '' }}</div>
        </div>
        <div class="message_content" style="margin-top: 4px;">
          <div class="headline">处置时间：</div>
          <div class="headline_content">{{ formatTime(item['lastUpdateTime']) }}</div>
        </div>
      </div>

      <div v-if="selectTab === 'pick'" class="message">
        <div class="message_content">
          <div class="type">{{ item['goodsName'] }}</div>
          <div class="terminal">{{ item['depositTerminal'] }}</div>
        </div>
        <div class="message_content" style="margin-top: 8px;">
          <div class="headline">物品类型：</div>
          <div class="headline_content">{{ item?.goodsType ?? '' }}</div>
        </div>
        <!-- <div class="message_content" style="margin-top: 4px;">
          <div class="headline">拾取时间：</div>
          <div class="headline_content">
            {{ item.lostTimeStart ? formatTime(item.lostTimeStart, 'YYYY-MM-DD') : '' }}
            {{ item.lostTimeEnd ? '~' + formatTime(item.lostTimeEnd, 'YYYY-MM-DD') : '' }}
          </div>
        </div> -->
        <div class="message_content" style="margin-top: 4px;">
          <div class="headline">拾取地：</div>
          <div class="headline_content">{{ item?.pickUpPlace ?? '' }}</div>
        </div>
        <div class="message_content" style="margin-top: 4px;">
          <div class="headline">拾取人姓名：</div>
          <div class="headline_content">{{ item?.pickUpName ?? '' }}</div>
        </div>
        <div class="message_content" style="margin-top: 4px;">
          <div class="headline">物品编号：</div>
          <div class="headline_content">{{ item?.goodsCode ?? '' }}</div>
        </div>
        <div class="message_content" style="margin-top: 4px;">
          <div class="headline">拾取时间：</div>
          <div class="headline_content">{{ formatTime(item['pickUpTime']) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs';
import { image } from '@/assets/index'
import { ref, reactive, defineProps, defineEmits, onBeforeMount, watch, computed } from 'vue';

const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  selectTab: {
    type: String,
    default: 'lost',
  }
})

const emit = defineEmits(['click'])

const formatTime = (str: string, ymd = "YYYY-MM-DD HH:mm:ss") => {
  if (!str) return '';
  return dayjs(str).format(ymd)
}

const gooodsClick = (record) => {
  emit('click', record)
}

</script>

<style lang="less" scoped>
.goods {
  max-height: 450px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;

  .goods_content {
    width: calc(100% / 3 - 24px);
    min-height: 180px;
    background: #F3F4F7;
    border-radius: 8px;
    margin-top: 24px;
    margin-right: 24px;
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    padding: 24px;
    box-sizing: border-box;

    .image {
      width: 132px;
      height: 132px;
    }

    .message {
      margin-left: 24px;

      .message_content {
        display: flex;
        flex-wrap: wrap;

        .type {
          font-size: 16px;
          font-family: HarmonyOS_Sans_SC_Bold;
          color: #535862;
          font-weight: bolder;
        }

        .terminal {
          margin-left: 16px;
          display: inline-block;
          text-align: center;
          width: 32px;
          height: 22px;
          line-height: 22px;
          background: rgba(0, 148, 255, 0.12);
          border-radius: 6px;
          border: 1px solid rgba(47, 143, 241, 0.4);
          font-size: 14px;
          color: #2F7DF1;
          ;
        }

        .headline {
          width: 85px;
          height: 22px;
          font-size: 14px;
          font-family: HarmonyOS_Sans_SC;
          color: #989DAA;
          line-height: 22px;
        }

        .headline_content {
          height: 22px;
          font-size: 14px;
          font-family: HarmonyOS_Sans_SC;
          color: #535862;
          line-height: 22px;
        }
      }

    }

    .btn-group {
      width: 100%;
      flex-shrink: 0;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .hidden_overdue {
    display: none;
  }

  .red_overdue {
    height: 28px;
    background: rgba(255, 71, 36, 0.12);
    border-radius: 6px;
    border: 1px solid rgba(255, 76, 45, 0.4);
    font-size: 14px;
    font-family: HarmonyOS_Sans_SC;
    color: #F24A45;
    line-height: 28px;
    padding-left: 8px;
    padding-right: 8px;
    position: absolute;
    top: 8px;
    right: 8px;
  }

  .green_overdue {
    height: 28px;
    background: rgba(255, 179, 31, 0.12);
    border-radius: 6px;
    border: 1px solid rgba(255, 159, 58, 0.4);
    font-size: 14px;
    font-family: HarmonyOS_Sans_SC;
    color: #FF8F3A;
    line-height: 28px;
    padding-left: 8px;
    padding-right: 8px;
    position: absolute;
    top: 8px;
    right: 8px;
  }
}
</style>